<template>
  <div class="data-title">
    <!-- data-title-textarea -->
    <div class="text-area ant-input">
      <div
        ref="ruleHTMLRef"
        :id="contentId"
        class="custom-input"
        contenteditable="true"
        @focus="textfocus"
        @blur="textblur"
        @keydown="keydown"
        @paste="paste"
      ></div>
    </div>
    <div class="data-title-select">
       
      <a-dropdown>
        <a class="ant-dropdown-link" href="javascript:void(0)"> 选择表单字段 </a>
        <a-menu slot="overlay">
          <a-menu-item
            v-for="item in dataItem"
            :key="item.code"
            @click="pushDataItem(item)"
          >
            <a href="javascript:void(0)">{{ item.name }}</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Mixins, Watch } from 'vue-property-decorator';

// import AppsApi from '@/apis/apps';
import textBeComeImg from '@/utils/text-image'

var ruleHTMLNode: any = ''

@Component({
  name: 'data-title',
})

export default class DataTitle extends Vue {
    @Prop() targetSchemaCode!:string

    @Prop() value!:any
    @Prop() list!:any
    contentId = `content${this.getGuid()}`;
    ruleHTMLNode:any = ''
    // getFocus() {
    //     this.$refs.select.focus()
    // }

    getGuid() {
        // 生成随机ID
        return `r${new Date().getTime()}d${Math.ceil(Math.random() * 1000)}`;
    }
    mounted() {
        this.$nextTick(() => {
            document.addEventListener('selectionchange', this.selectHandler);
        
            this.ruleHTMLNode = document.getElementById(this.contentId)
            this.loadData();
        })
        
        // const data = this.modalData.data;
    }
    paste(event) {
        var e = event || window.event
        e.preventDefault();
        var text =  (e.originalEvent || e).clipboardData.getData('text/plain');
        document.execCommand("insertText", false, text);
       
    }
    
    parseStringToNode(val) {
        let tempStr = '';
        val.forEach(res => {
            if (res.isDataItem ===1) {
                let d = this.dataItem.find( (item) => item.code === res.code);
                if (d) {
                    let dataItem = d
                    let imgID = Math.ceil(Math.random() * 1000)+dataItem.code
                    let imgSrc = textBeComeImg(dataItem.name)
                    let imgNode = `<img src="${imgSrc}" id="${imgID}" data-val='${dataItem.code}'>`;
                    this.ruleHTMLNode.insertAdjacentHTML('beforeend',imgNode)
                } else {
                    let dataItem = res;
                    let imgID = Math.ceil(Math.random() * 1000)+dataItem.code
                    let imgSrc = textBeComeImg(dataItem.code)
                    let imgNode = `<img src="${imgSrc}" id="${imgID}" data-val='${dataItem.code}'>`;
                    this.ruleHTMLNode.insertAdjacentHTML('beforeend',imgNode)
                }
            } else {
                this.ruleHTMLNode.insertAdjacentText('beforeend', res.code);
            }
        })
    }

    isfocue = false;
    textfocus() {
        this.isfocue = true;
    }
    keydown(event:any) {
        if(event.keyCode===13) {
            event.cancelBubble=true;

            event.preventDefault();

            event.stopPropagation();
        }
    }
    textblur() {
        this.isfocue = false
        const backData = this.formatterRuleHTML(this.ruleHTMLNode.childNodes);

        this.$emit('change',backData)
    }
    formatterRuleHTML(nodes:any) {
        let backData:any = [];
        for (let n of nodes) {
            const item = {
                isDataItem: 1,
                code: ''
            }
            if (n.nodeName === 'IMG') {
                item.code = n.dataset.val;
                backData.push(item);
            } else if (n.nodeName === '#text' && !!n.textContent) {
                item.isDataItem = 0;
                item.code = n.textContent;
                backData.push(item);
            } else if (n.nodeName === 'DIV') {
                let d = [];
                if (n.innerText) {
                   item.isDataItem = 0;
                   item.code = n.textContent;
                   backData.push(item);
                };
                if(n.children.length > 0) {
                    d = this.formatterRuleHTML(n.children);
                }
                backData = [...backData, ...d];
            }
            
        }
        return backData
   }

    dataItem:any = []

    loadData() {
        this.dataItem = this.list.filter(res => res.published);
        setTimeout(() => {
            if (this.value) {
                this.parseStringToNode(this.value);
            }
        }, 500)
       
        
        // const params = {
        //     schemaCode: this.schemaCode
        // }
        // AppsApi.getDataItemList(params).then(res => {
        //     if (res.errcode === 0) {
        //         this.dataItem = res.data;
        //         if (this.value && this.value.length > 0) {
        //             console.log('created => ', this.value)
        //             this.parseStringToNode(this.value);
        //         }
        //     }
        // })
    }
    
    savedRange:any = {}

    selectHandler() {
        
    // 监听选定文本的变动
        let sel = window.getSelection();
        // console.log('3333333333', sel)
        let range:any = sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
        if (
        !!range &&
        range.commonAncestorContainer &&
        range.commonAncestorContainer.ownerDocument.activeElement.id === this.contentId
        ) {
        this.savedRange = range;
        
        !this.ruleHTMLNode && (this.ruleHTMLNode=range.commonAncestorContainer)
        }
    }

    pushDataItem(selectDataItem) {
        if (selectDataItem) {
            let imgID = Math.ceil(Math.random() * 1000)+selectDataItem.code
            let imgSrc = textBeComeImg(selectDataItem.name)
            if (!!this.savedRange.commonAncestorContainer) {
                // let start = this.savedRange.startOffset
                // let end = this.savedRange.endOffset
                let imgNode = document.createElement('img')
                imgNode.src = imgSrc
                imgNode.id = imgID
                imgNode.dataset.val = `${selectDataItem.code}`
                this.savedRange.insertNode(imgNode)
                let endOffset = this.savedRange.endOffset
                this.savedRange.setStart(this.ruleHTMLNode,endOffset)
                this.ruleHTMLNode.focus()
            } else {
                this.ruleHTMLNode.focus()
                setTimeout(()=> {
                let imgNode = `<img src="${imgSrc}" id="${imgID}" data-val='${selectDataItem.code}'>`;
                this.ruleHTMLNode.insertAdjacentHTML('beforeend',imgNode)
                this.savedRange.setStart(this.ruleHTMLNode,this.savedRange.endOffset+1)
                this.ruleHTMLNode.focus()
                })
            }
        }
    }

    get schemaCode() {
        return this.$route.params.bizSchemaCode
    }

    // @Watch('value', {
    //     immediate: true
    // })
    // onValueChange(v:any) {
    //     if (v) {
    //         this.parseStringToNode(this.value);
    //     }  
    // }

    

}
</script>



<style lang="less" scoped>
.ant-dropdown-menu{
    max-height: 300px;
    overflow: scroll;
}
</style>

<style lang="less" scoped>
    .data-title{
        position: relative;
        .text-area{
            height: 100%;
            min-height: 100px;
            overflow: hidden;
            .custom-input{
                &.foucus {
                    overflow: hidden;
                }
                height: calc(100% - 28px);
                overflow: auto;
            }
            .ant-input{
                height: 100%;
                min-height: 98px;
                overflow-y: scroll;

                /deep/img{
                    vertical-align: -2.8px;
                    margin-right: 4px;
                }
            }
        }
        .data-title-select{
            position: absolute;
            left: 0;
            bottom: 0;
            // left: 8px;
            // bottom: 6px;
            z-index: 10;
            padding: 6px 11px;
            .ant-dropdown-link{
                color: @primary-color;
                
            }
        }
    
    }
</style>
